<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5图片预览，base64图片上传，APP端base64图片接收</title>
</head>
<body>
<style type="text/css">
	input{
		margin: 5px;
	}
	input[type="text"]{
		width: 400px;
	}
</style>

	<form  action="{:url('upload/upload_base64')}" name="form1" method="post" enctype="multipart/form-data">
		<input type="text" readonly="readonly" name="_ajax" value="1" placeholder=""><br/>
		<input type="text" name="type" placeholder="front:身份证正面, back:身份证反面, face:真人照片脸"><br/>
		<input type="file" name="image" id="upImage" onchange="imgPreview(this)"><br/>
		<input type="submit" value="提 交" name=""><br/>
		<textarea name="image" id="textarea" style="width: 500px; height: 200px;">
			
		</textarea>

	</form>

<img src="" id="preview">

	<!-- <form action="{:url('upload_auth_img')}" name="form1" method="post" enctype="multipart/form-data">
		<input type="text" name="sessionId" value="7619a8ffc8ec318a5b6518ae2205d6c1"><br/>
		<input type="text" name="type" value="" placeholder="front:身份证正面, back:身份证反面, face:真人照片脸"><br/>
		<input type="file" name="image"><br/>
		<input type="submit" value="提 交" name="">
	</form> -->
</body>


<script type="text/javascript">
	
	function imgPreview(fileDom){
	    //判断是否支持FileReader
	    if (window.FileReader) {
	        var reader = new FileReader();
	    } else {
	        alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
	    }

	    //获取文件
	    var file = fileDom.files[0];
	    var imageType = /^image\//;
	    //是否是图片
	    if (!imageType.test(file.type)) {
	        alert("请选择图片！");
	        return;
	    }
	    //读取完成
	    reader.onload = function(e) {
	        //获取图片dom
	        var img = document.getElementById("preview");
	        var textarea = document.getElementById("textarea");
	        //图片路径设置为读取的图片
	        img.src = e.target.result;
	        $(textarea).text(e.target.result);
	    };
	    reader.readAsDataURL(file);
	}
</script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){

	})
</script>
</html>